<template>
    <div class="mform">
        <div class="back">
            <Back>
                <div class="form-btn">
                    <el-button type="primary" @click="save()">保存</el-button>
                </div>
            </Back>
        </div>
        <div style="padding: 10px; height: 100%">
            <el-form ref="formRef" :model="form" :rules="rules" :label-position="'right'" label-width="auto">
                <el-tabs type="card" v-model="activeName">
                    <!-- 基本信息 -->
                    <el-tab-pane label="基本信息" name="base">
                        <div class="form-content">
                            <div class="form-box" style="width: 60%;">
                                <el-form-item label="活动名称" prop="name">
                                    <el-input v-model="form.name" placeholder="请输入活动名称" clearable />
                                </el-form-item>
                                <el-form-item label="活动类型" prop="type">
                                    <el-select v-model="form.type" collapse-tags placeholder="请选择活动类型">
                                        <el-option :value="item.id" :label="item.name" v-for="(item, index) in typeList"
                                            :key="index" />
                                    </el-select>
                                    <span style="margin-left: 10px; color: red;">*活动类型变更将导致活动规则配置数据清空，请谨慎操作</span>
                                </el-form-item>
                                <el-form-item label="活动时间" prop="time_range">
                                    <el-date-picker v-model="form.time_range" type="datetimerange" range-separator="至"
                                        start-placeholder="活动开始时间" end-placeholder="活动结束时间"
                                        value-format="YYYY-MM-DD HH:mm:ss"
                                        :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59),]" />
                                </el-form-item>

                                <el-form-item label="状态" prop="state">
                                    <el-radio-group v-model="form.state">
                                        <el-radio :value="1" border>启用</el-radio>
                                        <el-radio :value="2" border>禁用</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="优先级(降序)" prop="sort" required>
                                    <el-input v-model="form.sort" placeholder="请输入序号(降序)" clearable />
                                </el-form-item>

                                <el-form-item label="标签" prop="tag">
                                    <el-input v-model="form.tag" placeholder="请输入标签" clearable />
                                </el-form-item>

                                <el-form-item label="描述" prop="desc">
                                    <el-input v-model="form.desc" placeholder="请输入简短描述" clearable />
                                </el-form-item>


                            </div>
                        </div>
                    </el-tab-pane>
                    <!-- 规则信息 -->
                    <el-tab-pane label="规则信息" name="rules">
                        <div class="form-content">
                            <div class="form-box" style="width: 60%;">

                                <span>{{ form.type_name }}</span>
                                <div v-if="form.type == 1">
                                    <el-divider content-position="left">
                                        <el-tooltip content="折扣信息，范围在0~10之间，请严谨操作">
                                            <el-icon>
                                                <WarnTriangleFilled />
                                            </el-icon>
                                        </el-tooltip>
                                    </el-divider>
                                    <el-form-item label="折扣" prop="rules">
                                        <el-input v-model="form.rules[0]['youhui']" placeholder="请输入0~10之间的数字"
                                            clearable />
                                    </el-form-item>
                                </div>

                                <div v-else-if="form.type == 2">
                                    <el-divider content-position="left">
                                        <el-tooltip content="满减信息，优惠金额不能大于门槛金额，请严谨操作（单位：元）">
                                            <el-icon>
                                                <WarnTriangleFilled />
                                            </el-icon>
                                        </el-tooltip>
                                    </el-divider>
                                    <div>
                                        <div class="ipt-item" style="display: flex; align-items: center;"
                                            v-for="(ruleItem, ruleIndex) in form.rules" :key="ruleIndex">
                                            <el-form-item label="满(元)" :prop="'rules.' + ruleIndex + '.menka'"
                                                :rules="{ required: true, message: '门槛金额不能为空', trigger: 'blur' }">
                                                <el-input v-model="ruleItem.menka" placeholder="请输入门槛金额" clearable />
                                            </el-form-item>
                                            <el-form-item label="减" :prop="'rules.' + ruleIndex + '.youhui'"
                                                :rules="{ required: true, message: '优惠金额不能为空', trigger: 'blur' }">
                                                <el-input v-model="ruleItem.youhui" placeholder="请输入优惠金额" clearable />
                                            </el-form-item>
                                            <el-button type="danger" v-show="ruleIndex == 0 ? false : true"
                                                @click="delRule(ruleIndex)"
                                                style="margin-top: -18px;margin-left:10px">删除</el-button>
                                        </div>
                                        <el-button type="info" @click="addRule"
                                            style="margin-bottom: 10px;margin-left: 227px;">阶梯+</el-button>
                                    </div>
                                </div>

                                <div v-else-if="form.type == 3">
                                    <el-divider content-position="left">
                                        <el-tooltip content="满件折信息，折扣范围在1~10，请严谨操作（单位：件）">
                                            <el-icon>
                                                <WarnTriangleFilled />
                                            </el-icon>
                                        </el-tooltip>
                                    </el-divider>
                                    <div>
                                        <div class="ipt-item" style="display: flex; align-items: center;"
                                            v-for="(ruleItem, ruleIndex) in form.rules" :key="ruleIndex">
                                            <el-form-item label="满(件)" :prop="'rules.' + ruleIndex + '.menka'"
                                                :rules="{ required: true, message: '门槛件数不能为空', trigger: 'blur' }">
                                                <el-input v-model="ruleItem.menka" placeholder="请输入门槛件数" clearable />
                                            </el-form-item>
                                            <el-form-item label="折" :prop="'rules.' + ruleIndex + '.youhui'"
                                                :rules="{ required: true, message: '优惠折扣不能为空', trigger: 'blur' }">
                                                <el-input v-model="ruleItem.youhui" placeholder="请输入优惠折扣（1~10）"
                                                    clearable />
                                            </el-form-item>
                                            <el-button type="danger" v-show="ruleIndex == 0 ? false : true"
                                                @click="delRule(ruleIndex)"
                                                style="margin-top: -18px;margin-left:10px">删除</el-button>
                                        </div>
                                        <el-button type="info" @click="addRule"
                                            style="margin-bottom: 10px;margin-left: 227px;">阶梯+</el-button>
                                    </div>
                                </div>

                                <div v-else-if="form.type == 4">
                                    <el-divider content-position="left">
                                        <el-tooltip content="满件减信息，请严谨操作（单位：元）">
                                            <el-icon>
                                                <WarnTriangleFilled />
                                            </el-icon>
                                        </el-tooltip>
                                    </el-divider>
                                    <div>
                                        <div class="ipt-item" style="display: flex; align-items: center;"
                                            v-for="(ruleItem, ruleIndex) in form.rules" :key="ruleIndex">
                                            <el-form-item label="满(件)" :prop="'rules.' + ruleIndex + '.menka'"
                                                :rules="{ required: true, message: '门槛件数不能为空', trigger: 'blur' }">
                                                <el-input v-model="ruleItem.menka" placeholder="请输入门槛件数" clearable />
                                            </el-form-item>
                                            <el-form-item label="减" :prop="'rules.' + ruleIndex + '.youhui'"
                                                :rules="{ required: true, message: '优惠金额不能为空', trigger: 'blur' }">
                                                <el-input v-model="ruleItem.youhui" placeholder="请输入优惠金额" clearable />
                                            </el-form-item>
                                            <el-button type="danger" v-show="ruleIndex == 0 ? false : true"
                                                @click="delRule(ruleIndex)"
                                                style="margin-top: -18px;margin-left:10px">删除</el-button>
                                        </div>
                                        <el-button type="info" @click="addRule"
                                            style="margin-bottom: 10px;margin-left: 227px;">阶梯+</el-button>
                                    </div>
                                </div>

                                <div v-else-if="form.type == 5">
                                    <el-divider content-position="left">
                                        <el-tooltip content="一口价信息，请勿超过商品金额，请严谨操作">
                                            <el-icon>
                                                <WarnTriangleFilled />
                                            </el-icon>
                                        </el-tooltip>
                                    </el-divider>
                                    <el-form-item label="售价" prop="rules">
                                        <el-input v-model="form.rules[0]['youhui']" placeholder="请输入售价" clearable />
                                    </el-form-item>
                                </div>

                                <div v-else-if="form.type == 6">
                                    <el-divider content-position="left">
                                        <el-tooltip content="每满减信息，优惠金额不能大于门槛金额，请严谨操作（单位：元）">
                                            <el-icon>
                                                <WarnTriangleFilled />
                                            </el-icon>
                                        </el-tooltip>
                                    </el-divider>
                                    <div>
                                        <div class="ipt-item" style="display: flex; align-items: center;"
                                            v-for="(ruleItem, ruleIndex) in form.rules" :key="ruleIndex">
                                            <el-form-item label="每满(元)" :prop="'rules.' + ruleIndex + '.menka'"
                                                :rules="{ required: true, message: '门槛金额不能为空', trigger: 'blur' }">
                                                <el-input v-model="ruleItem.menka" placeholder="请输入门槛金额" clearable />
                                            </el-form-item>
                                            <el-form-item label="减" :prop="'rules.' + ruleIndex + '.youhui'"
                                                :rules="{ required: true, message: '优惠金额不能为空', trigger: 'blur' }">
                                                <el-input v-model="ruleItem.youhui" placeholder="请输入优惠金额" clearable />
                                            </el-form-item>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </el-tab-pane>
                    <!-- 活动商品 -->
                    <el-tab-pane label="活动商品" name="goods">
                        <div class="form-content" ref="boxRef" style="height: 100%">
                            <div style="display: flex; height: 100%">
                                <div class="fl" style="flex: 1; width: 50%; padding: 0 10px;">
                                    <el-form-item label="商品ID" prop="include_barcode" required>
                                        <el-input v-model="form.include_barcode" type="textarea"
                                            :autosize="{ minRows: 7, maxRows: 9 }" placeholder="请输入参与该活动的商品ID,多个以逗号隔开" />
                                        <el-button type="danger" size="small" @click="clearBarcode">清空</el-button>
                                    </el-form-item>
                                    <el-form-item label="剔除商品" prop="exclude_barcode">
                                        <el-input v-model="form.exclude_barcode" type="textarea"
                                            :autosize="{ minRows: 3, maxRows: 4 }" placeholder="请输入不参与该活动的商品ID,多个以逗号隔开" />
                                    </el-form-item>
                                </div>
                                <div class="goods-box">
                                    <!-- <div style="display: flex;">
                                    <el-input style="width: 180px;" placeholder="商品名称" v-model="params.name" clearable
                                        @change="getTable"></el-input>
                                    <el-input style="width: 180px;" placeholder="商品条码" v-model="params.barcode"
                                        clearable @change="getTable"></el-input>
                                    <el-select style="width: 180px;" v-model="params.state" placeholder="状态" clearable
                                        @change="getTable">
                                        <el-option label="上架" value="1" />
                                        <el-option label="下架" value="2" />
                                    </el-select>
                                    <el-button type="primary" @click="insertGoods">批量插入</el-button>
                                </div> -->
                                    <!-- <el-table :data="table.data" resizable border show-overflow-tooltip
                                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                                    v-loading="table.load" :show-checkbox="true"
                                    @selection-change="handleSelectionChange" ref="goodsTableRef" size="small"
                                    :height="table.goodsHeight">
                                    <el-table-column type="selection" width="55"
                                        v-model="multipleSelection"></el-table-column>
                                    <template v-for="row in table.column">
                                        <el-table-column :label="row.label" :prop="row.key" :width="row.width"
                                            :align="row.align" :fixed="row.fixed">
                                            <template #default="scope">
                                                <span v-if="row.key == 'full_logo'">
                                                    <img v-if="scope.row['full_logo']" :src="scope.row['full_logo']"
                                                        style="width:50px;height:50px" alt="">
                                                </span>
                                                <span v-else-if="row.key == 'state'">
                                                    <el-tag type="success" v-if="scope.row[row.key] == 1">{{
                scope.row.state_name }}</el-tag>
                                                    <el-tag type="danger" v-if="scope.row[row.key] == 2">{{
                scope.row.state_name }}</el-tag>
                                                </span>
                                                <span v-else>
                                                    {{ scope.row[row.key] }}
                                                </span>
                                            </template>
</el-table-column>
</template>
</el-table> -->
                                    <!-- <div class="table-more">
                                    <el-pagination v-model:current-page="pages.page" v-model:page-size="pages.page_size"
                                        :page-sizes="[30, 50, 100, 200, 300, 500]" :small="true" :background="true"
                                        layout="total, sizes, prev, pager, next" :total="pages.count"
                                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                                </div> -->
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>

                </el-tabs>
            </el-form>
        </div>
    </div>
</template>
<script setup name="ActivityEdit">

const { proxy } = getCurrentInstance()
const activeName = ref('base');

const formRef = ref();
const form = reactive({
    id: '', name: '', type: '', time_range: [], state: 1, sort: '',tag: '', desc: '',
    rules: [
        {
            menka: '',
            youhui: ''
        }
    ],
    include_barcode: '',
    exclude_barcode: ''
});
//验证规则
const rules = {
    name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
    type: [{ required: true, message: '请选择活动类型', trigger: 'blur' }],
    time_range: [{ required: true, message: '请选择活动时间', trigger: 'blur' }],
    state: [{ required: true, message: '请选择活动状态', trigger: 'blur' }],
    sort: [{ required: false, message: '请输入排序', trigger: 'blur' }],
    include_barcode: [{ required: false, message: '请输入商品条码', trigger: 'blur' }],
};

//保存
async function save() {
    formRef.value.validate(async (valid) => {
        if (valid) {

            let res = await proxy.$post('ActivePromotionSave', form)
            if (res.code === 0) {
                ElMessage({ type: 'success', message: '保存成功' });
                proxy.$bus.emit('back');
            }
        }
    });
}

onMounted(() => {
    getOptions()
    // 编辑
    let id = proxy.$route.query.id || null;
    if (id) {
        getDetail(id)
    }
});

async function getDetail(id) {
    let res = await proxy.$post('ActivePromotionDetail', {
        id
    }, false)
    if (res.code === 0) {
        Object.assign(form, res.data);
    }

}

const typeList = ref([]);
async function getOptions() {
    let res = await proxy.$post('OptionsList', { keys: ['activeOptions'] }, false)
    if (res.code === 0) {
        const adOptions = res.data.activeOptions || {}
        typeList.value = adOptions.type || []
        form.type = typeList.value[0].id
    }
}


// 添加规则
const addRule = () => {
    form.rules.push({
        menka: '',
        youhui: ''
    })
}
const delRule = (index) => {
    form.rules.splice(index, 1)
}

</script>
<style scoped lang="scss">
.el-tabs {
    height: 100%;
}

::v-deep .el-tabs__content {
    height: calc(100% - 70px);
}

.el-tab-pane {
    height: 100%;
}
</style>